<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minesweeper Web</title>
<style type="text/css">
	html, body {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
	}
	
	canvas {
		margin: 0px;
		padding: 0px;
	}
</style>
<script type="text/javascript" src="themes/gnome/theme.js"></script>
<script type="text/javascript">
	var theme = 'gnome';
	var elementsLoaded = 0;
	var statusBarHeight = 50;
	var canvasSize;
	var tiles;
	var faces;
	var minesfield;

	window.addEventListener( 'load', function() {
		canvasSize = calculateScreenSize();
		
		tiles = new Sprite({ 'src': 'themes/' + theme + '/images/tiles.png', 'width': tile_width, 'height': tile_height, 'onload':  elementLoaded });
		faces = new Sprite({ 'src': 'themes/' + theme + '/images/tiles.png', 'width': faces_width, 'height': faces_height, 'onload':  elementLoaded });
		
	}, false );

	function calculateScreenSize() {
		var size = { 'width': 0, 'height': 0 };
		
		if( document.body && document.body.offsetWidth ) {
			size[ 'width' ] = document.body.offsetWidth;
			size[ 'height' ] = document.body.offsetHeight;
		} if( document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
			size[ 'width' ] = document.documentElement.offsetWidth;
			size[ 'height' ] = document.documentElement.offsetHeight;
		} if( window.innerWidth && window.innerHeight ) {
			size[ 'width' ] = window.innerWidth;
			size[ 'height' ] = window.innerHeight;
		}

		return size;
	}
	
	function elementLoaded() {
		elementsLoaded++;
		if( elementsLoaded == 3 ) {
		}
	}

	function prepareMineField() {
	}
		 


	/*var theme = 'gnome';
	var loadVeryfier = 4;
	var elementsLoaded = 0;
	var tiles = new Tiles({ 'theme': theme, 'with': 20, 'height': 20, 'callback': elementLoaded });
	//var tiles = loadImage( 'themes/' + theme + '/images/tiles.png' );
	var faces = loadImage( 'themes/' + theme + '/images/faces.png' );
	var resum = loadImage( 'themes/' + theme + '/images/resume.png' );
	var canvas;
	var context;
	var width;
	var height;
	var tile_width = 20;
	var tile_height = 20;

	window.addEventListener( 'load', elementLoaded, false );

	function loadImage( src ) {
		var img = new Image();
		img.addEventListener( 'load', elementLoaded, true );
		img.src = src;
		return img;
	}
	
	function elementLoaded() {
		elementsLoaded++;
		if( loadVeryfier == elementsLoaded ) drawTiles();
	}

	function drawTiles() {
		calculateScreenSize();
		canvas = document.getElementById( 'minesweeper' );
		canvas.width = width;
		canvas.height = height;
		context = canvas.getContext( '2d' );

		var wTiles = Math.floor( width / tile_width );
		var hTiles = Math.floor( height / tile_height );

		var startLeft = Math.floor( ( width - wTiles * tile_width ) / 2 );
		var startTop = Math.floor( ( height - hTiles * tile_height ) / 2 );

		for( var y = 0; y < hTiles; y++ ) {
			for( var x = 0; x < wTiles; x++ ) {
				drawTile( 9, startLeft + x * tile_width, startTop + y * tile_height );
			}
		}
	}

	function drawTile( tile, posX, posY ) {
		context.drawImage( tiles, tile * tile_width, 0, tile_width, tile_height, posX, posY, tile_width, tile_height );
	}
	
	function calculateScreenSize() {
		if( document.body && document.body.offsetWidth ) {
			width = document.body.offsetWidth;
			height = document.body.offsetHeight;
		} if( document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
			width = document.documentElement.offsetWidth;
			height = document.documentElement.offsetHeight;
		} if( window.innerWidth && window.innerHeight ) {
			width = window.innerWidth;
			height = window.innerHeight;
		}
	}*/
</script>
</head>
<body>
	<canvas id="minesweeper">Your browser don't support canvas</canvas>
</body>
</html>